<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>洪炜斐——学生管理系统——用户中心</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/hf.css">
    <link rel="stylesheet" href="./css/table.css">
    <link rel="stylesheet" href="./css/custom.css">
</head>
<body>
    <jsp:include page="component/header.jsp">
        <jsp:param name="page" value="用户中心"/>
    </jsp:include>

    <!-- 修改密码弹窗 -->
    <dialog class="panel gap-1em">
        <div class="flex-row">
            <h3 style="margin: 0;">修改密码</h3>
        </div>
        <form id="form-update-password" class="form">
            <div>
                <label for="input-password-old">
                    旧密码：
                </label>
                <input
                    id="input-password-old"
                    type="password"
                    name="password"
                    placeholder="请输入旧密码"
                    required
                >
                <span></span>
            </div>
            <div>
                <label for="input-password-new">
                    新密码：
                </label>
                <input
                    id="input-password-new"
                    type="password"
                    name="newPassword"
                    placeholder="请输入新密码"
                    required
                    pattern="[a-zA-Z0-9_]{6,12}"
                >
                <span></span>
                <span></span>
            </div>
            <div>
                <label for="input-password-new-confirm">
                    确认密码：
                </label>
                <input id="input-password-new-confirm" type="password" placeholder="请再次输入新密码" required>
                <span></span>
                <span></span>
            </div>
            <div class="flex-row justify-center gap-1em">
                <input class="button primary" type="submit" value="确定">
                <input class="button" type="reset" value="取消" onclick="closeDialog()">
            </div>
        </form>
    </dialog>

    <main class="items-center justify-center" style="transform: translateY(-20%)">
        <div class="panel gap-1em fit-content" style="min-width: 20rem;">
            <div class="text-center">
                <h2 style="margin: 0.5em 0;">用户信息</h2>
            </div>
            <div>
                <span>用户名：</span>
                <span>${sessionScope.username}</span>
            </div>
            <div class="text-center">
                <button class="button primary" onclick="updatePassword()">修改密码</button>
                <button class="button" onclick="logout()" style="margin-left: 1em">退出登录</button>
            </div>
        </div>
    </main>

    <script>
        function logout() {
            if (window.confirm("是否退出登录")) {
                window.location.href = "./action/user/logout";
            }
        }

        const dialogElement = document.querySelector("dialog");
        dialogElement.style.display = "none";
        function updatePassword() {
            dialogElement.style.display = "";
            dialogElement.showModal();
        }
        function closeDialog() {
            dialogElement.close();
            dialogElement.style.display = "none";
        }

        const inputPasswordOld = document.querySelector("#input-password-old");
        const inputPasswordNew = document.querySelector("#input-password-new");
        const inputPasswordNewConfirm = document.querySelector("#input-password-new-confirm");
        inputPasswordNew.addEventListener("input", () => {
            inputPasswordNewConfirm.setAttribute("pattern", inputPasswordNew.value);
        });
        inputPasswordNewConfirm.addEventListener("input", () => {
            if (inputPasswordNew.value === inputPasswordNewConfirm.value) {
                inputPasswordNewConfirm.setCustomValidity("");
            } else {
                inputPasswordNewConfirm.setCustomValidity("两次密码不一致");
            }
        });

        const updatePasswordForm = document.querySelector("#form-update-password");
        updatePasswordForm.onsubmit = (e) => {
            e.preventDefault();

            const password = inputPasswordOld.value;
            const newPassword = inputPasswordNew.value;
            if (password === newPassword) {
                alert("新密码不能与旧密码相同")
                return;
            }

            fetch("./action/user", {
                method: "PUT",
                credentials: "include",
                headers: {
                    "Content-Type": "application/json",
                    // 'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: JSON.stringify({
                    password,
                    newPassword,
                }),
            })
            .then(res => res.text())
            .then(responseHTML => {
                document.write(responseHTML);
            });
        };
    </script>
</body>
</html>

